<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="0">
    <title>报名缴费</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="__STATIC__/webapp/css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" src="__STATIC__/webapp/js/jquery-1.11.0.js"></script>
    <script src="__STATIC__/webapp/js/mui.js"></script>
    {include file="public/weixin_sdk" /}
</head>
<body>

<style type="text/css">
    body {
        background: #FFFFFF;
    }

    header.mui-bar {
        background-color: #242736;
        color: #FFF;
    }

    header.mui-bar .mui-title {
        color: #FFF;
        font-size: 15px;
    }

    div.mui-input-row p.con {
        line-height: 1.7;
    }

    span.fl {
        float: left;
    }

    span.fr {
        float: right;
    }

    ul.ulPay li {
        line-height: 3;
    }

    div.mui-content-padded {
        background: #FFF;
    }

    div.payBtn {
        width: 80%;
        height: 35px;
        margin: 30px auto;
        display: block;
        padding: 6px 0;
    }

    span.wx {
        color: #2BA246;
    }

    div.mui-input-group {
        position: relative;;
    }

    span.wxPay {
        position: absolute;
        right: 20px;
        top: 8px;
    }

    div.mui-input-row {
        margin: 10px 0;
    }
</style>

<a href="{:url('webapi/user/user_center')}">
    <header id="mui-color" class="mui-bar mui-bar-nav">
        <div class="mui-icon  mui-icon-left-nav mui-pull-left lotteryBack"></div>
        <h1 class="mui-title">报名缴费</h1>
    </header>
</a>


<div class="mui-content" style="margin-top:64px;">
    <div class="mui-content-padded" style="margin:10px 0px;">

        <div class="mui-card">
            <form class="mui-input-group" id="checkModel">
                {foreach $products as $key=>$vo}
                <div class="mui-input-row mui-checkbox mui-left">
                    <label>{$vo.goods_title}</label>
                    {if($vo['is_checked'] == 1)}
                    <input checked name="checkbox" value="{$vo.id}" type="checkbox" class="check">
                    {else}
                    <input name="checkbox" value="{$vo.id}" type="checkbox" class="check">
                    {/if}
                    <span class="wxPay"><span class="mui-icon wx mui-icon-weixin"></span>&nbsp; ¥{$vo.prices}</span>
                </div>
                {/foreach}

            </form>
        </div>

        <div style=" clear: both;" class="mui-btn mui-btn-primary payBtn" onclick="pay()">立即缴费</div>
    </div>
</div>

<script type="text/javascript">
    function pay() {
        var data = [];
        $('.check').each(function (index, item) {

            var isChecked = $(item).is(':checked');

            if (isChecked) {
                data.push($(item).val());
            }
        });

        if (!data.length) {
            mui.toast('请选择要缴费的项目');
            return;
        }
        data = data.join(',');
        var url = "{:url('webapi/wx/pay')}";
        window.location.href = url + '?product_ids=' + data;
    }

</script>
{include file="public/weixin_share" /}
</body>

</html>